import Taro from "@tarojs/taro";
import { Popup, SafeArea } from "@taroify/core";
import { Button, ButtonProps, Image, Radio, Text, View } from "@tarojs/components";
import { GpTouchableView } from "@/components/GpTouchableView";
import styles from "./index.module.css";
import { useAuthStore } from "@/store";
import { useRef, useState } from "react";
import { postDecryptphonenumberlogin } from "@/apis/endpoint/home";
import { navigate } from "@/utils/navigation";
import { pageMapper } from "@/constants/pageMap";

export default function GpAuthPannel() {
  const miniVisitorId = useAuthStore(state => state.userInfo?.miniVisitorId)!
  const authPannel = useAuthStore(state => state.authPannel)
  const setOpen = useAuthStore(state => state.toggleAuthPannel)
  const setUserInfo = useAuthStore(state => state.setUserInfo)
  const fetchMemberProfile = useAuthStore(state => state.fetchMemberProfile)
  const [allowed, setAllowed] = useState(false)
  const authFulfilledFn = useRef<INullable<IFn>>(null)
  const getPhoneNumber: ButtonProps['onGetPhoneNumber'] = function ({detail}) {
    postDecryptphonenumberlogin({
      encryptedData: detail.encryptedData,
      iv: detail.iv,
      miniVisitorId
    })
    .send({loadingText: '登录中'})
    .then(info => {
      setUserInfo(info)
      authFulfilledFn.current = authPannel.authFulfilledFn
      setOpen(false)
      return fetchMemberProfile()
    })
    .then(profile => {
      if (!profile.jobTypeId) {
        navigate(pageMapper.me.infoguide, null, "reLaunch")
      } else if (typeof authFulfilledFn.current === 'function') {
        authFulfilledFn.current()
        authFulfilledFn.current = null
      }
    })
  }
  function handleAllowedTip() {
    Taro.showToast({
      title: '请先勾选同意相关协议',
      icon: 'none'
    })
  }
  return (
    <Popup rounded placement="bottom" open={authPannel.open} onClose={setOpen}>
      <View className="box-border flex flex-col items-center px-[32px] pt-[80px] pb-[96px]">
        <Image src="/static/images/common/logo.png" className="size-[128px] block object-cover" />
        <Text className="text-center text-primary text-[40px] font-bold mt-[32px]">欢迎来到 智聘！</Text>
        <View className="box-border w-full mt-[80px]">
          {
            allowed
            ? (
            <Button className="flex flex-row justify-center items-center bg-theme h-[96px] rounded-[64px]" openType="getPhoneNumber|agreePrivacyAuthorization" onGetPhoneNumber={getPhoneNumber}>
              <Text className="text-white text-[36px] font-medium">手机号快捷登录</Text>
            </Button>
            ) : (
            <GpTouchableView className="flex flex-row justify-center items-center bg-theme h-[96px] rounded-[64px]" onClick={handleAllowedTip}>
              <Text className="text-white text-[36px] font-medium">手机号快捷登录</Text>
            </GpTouchableView>
            )
          }
        </View>
        <View className="w-full box-border mt-[40px] flex flex-col">
          <Radio color="#0768fa" className={styles.radio} checked={allowed} onClick={() => setAllowed(val => !val)}>
            <Text className="text-third text-[24px]">未登录用户初次登录自动完成注册，登录代表您已同意</Text>
          </Radio>
          <Text className="text-[24px] text-third pl-[28px]">
            <Text className="text-theme">《用户协议》</Text>和<Text className="text-theme">《隐私协议》</Text>
          </Text>
        </View>
      </View>
      <SafeArea position="bottom" />
    </Popup>
  )
}
